<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
        占坑，占位  一般用于拓展组件，或者当组件内容不确定时

        默认插槽、具名插槽、作用域插槽


        1、默认插槽
            子组件内部传入slot ,父组件传入值
                
        */ 
        // <!-- 子组件 ChildComponent.vue -->
        // <template>
        //     <div>
        //         <h2>子组件标题</h2>
        //         <slot></slot>  <!-- 插槽位置 -->
        //     </div>
        // </template>

        // <!-- 父组件使用 -->
        // <child-component>
        //     <p>这是插入到子组件中的内容</p>
        // </child-component>

        // 2、具名插槽: 当需要多个插槽时，可以使用具名插槽，分清谁是谁
        // 子组件
        // <template>
        //     <div>
        //     <header>
        //         <slot name="header"></slot>
        //     </header>
        //     <main>
        //         <!-- 默认插槽 -->
        //         <slot></slot>  
        //     </main>
        //     <footer>
        //         <slot name="footer"></slot>
        //     </footer>
        //     </div>
        // </template>

        // 父组件
        /*
        <layout>
            <template v-slot:header>
            <h1>这是头部</h1>
            </template>
            <template v-slot:header>
                <h1>这是头部</h1>
            </template>
            <p>这是主要内容，会插入到默认插槽</p>
            <template v-slot:footer>
                <h1>这是头部</h1>
            </template>
            <p>这是主要内容，会插入到默认插槽</p>
            
            <template v-slot:footer>
            <p>这是页脚</p>
            </template>
        </layout>
        */ 


        // 3、作用域插槽--子传父
        /*
        子
        <template>
            <footer>
                <slot :currentData="nameObj"></slot>
            </footer>
        </template>
        <script setup>
            import {reactive} from 'vue'
            const nameObj = reactive({
                name:'沙雕',
                age:28,
                address:'上海大厦'
            })
        <script>

            父
            <template>
                <mySlot>
                    <template v-slot="{currentData}">
                        {{currentData}}
                    </tempalate>
                </mySlot>
            </template>
        */ 
    </script>
</body>
</html>